<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" th:href="@{/favicon.png}"/>
    <link rel="bookmark" th:href="@{/favicon.png}"/>
    <title th:text="#{index.signIn}">登陆</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" type="text/javascript"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <style type="text/css">
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        html,
        body {
            height: 100%;
        / / background-size: cover;
        / / background-image: url("image/101-desktop-wallpaper.png");
        }

        body {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }

        .form-signin {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: auto;
        }

        .form-signin .checkbox {
            font-weight: 400;
        }

        .form-signin .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }

        .form-signin .form-control:focus {
            z-index: 2;
        }

        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    </style>
</head>
<body class="text-center">


<form class="form-signin" name="user" id="signIn-form" action="/sign-in" method="post">
    <img class="mb-4" src="favicon.png" alt="" width="50%" height="50%">
    <h1 class="h3 mb-3 font-weight-normal" th:text="#{index.signin.welcome}">Please sign in</h1>
    <div class="row mb-2">
        <div class="col">
            <a href="/" id="a-back">
                <button onclick="addLocaleUrl('a-back')" type="button" class="btn btn-secondary btn-sm">
                    [[#{index.back}]]
                </button>
            </a>
        </div>
        <div class="col">
            <a href="/sign-up" id="a-sign-up">
                <button onclick="addLocaleUrl('a-sign-up')" type="button" class="btn btn-success btn-sm">
                    [[#{index.signup}]]
                </button>
            </a>
        </div>
    </div>
    <!-- 邮箱 -->
    <div class="form-group">
        <input type="email" name="email" class="form-control" id="InputEmail" aria-describedby="emailHelp"
               th:placeholder="#{index.Enteremail}">
        <!-- 错误提示信息 -->
        <small id="emailHelp" class="form-text text-muted" th:text="${emailMsg}"></small>
    </div>

    <!-- 密码 -->
    <div class="form-group">
        <input type="password" name="password" class="form-control" id="InputPassword"
               th:placeholder="#{index.Password}">
        <small id="passwordMessage" class="form-text text-muted" th:text="${pwdMsg}"></small>
    </div>

    <!--验证码 -->
    <div class="form-group">
        <a href="javascript:void(0);">
            <img title="点击刷新" src="/captche/images" onclick="this.src='/captche/images?'+Math.random()"/>
        </a>
        <input autocomplete="off" type="text" th:placeholder="#{publish.issue.CAPTCHA}" name="validateCode" id="validateCode" class="form-control" required="required"/>
        <small id="validateCodeMessage" class="form-text text-muted" th:text="${kaptchaMsg}"></small>

    </div>

    <div class="row">
        <div class="col">
            <div class="custom-control custom-radio custom-control-inline">
                <input type="checkbox" id="rememberBox" name="remember" class="custom-control-input"
                       value="remember-me">
                <label class="custom-control-label" for="rememberBox">[[#{index.signup.rember}]]</label>
            </div>
        </div>
        <div class="col">
            <button onclick="alert('暂未完成，如有需要请联系管理员！')" type="button" class="btn btn-link">[[#{index.forgetPassword}]]</button>
        </div>
    </div>


    <button class="btn btn-lg btn-primary btn-block" type="button" onclick="check()">[[#{index.signIn}]]
    </button>
    <p class="mt-5 mb-3 text-muted">&copy; 2019-2019</p>
</form>

<script src="/js/url.js" type="text/javascript"></script>
<script src="/js/checkInput.js" type="text/javascript"></script>

<script>
    var check = function () {
        var email = document.getElementById("InputEmail").value;
        var password = document.getElementById("InputPassword").value;
        if(email == "") {
            document.getElementById("emailHelp").innerText = "邮箱不能为空！";
            return;
        } else if(!chheckEmail(email)) {
            document.getElementById("emailHelp").innerText = "邮箱格式不正确！";
            return;
        }
        if(password === "") {
            document.getElementById("passwordMessage").innerText = "密码不能为空！";
            return;
        }

        if(password != "" && chheckEmail(email)) {
            var form = document.getElementById("signIn-form");
            var l = GetQueryString('l');
            if(l === 'en-US') {
                form.action = form.action + "?l=" + l;
            }
            form.submit();
        }

    }
</script>
</body>
</html>
